<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="../../css/test3/style.css" rel="stylesheet" type="text/css">
    <link href="../../css/test3/animation.css" rel="stylesheet" media="screen" type="text/css">
    <title>带动画效果的图片hover遮罩JS效果代码 - JS代码网</title>
    <style class="firebugResetStyles" type="text/css" charset="utf-8">/* See license.txt for terms of usage */
    /** reset styling **/
    .firebugResetStyles {
        z-index: 2147483646 !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        border: 0 none !important;
        margin: 0 !important;
        padding: 0 !important;
        outline: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        position: fixed !important;
        transform: rotate(0deg) !important;
        transform-origin: 50% 50% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent none !important;
        pointer-events: none !important;
        white-space: normal !important;
    }
    style.firebugResetStyles {
        display: none !important;
    }

    .firebugBlockBackgroundColor {
        background-color: transparent !important;
    }

    .firebugResetStyles:before, .firebugResetStyles:after {
        content: "" !important;
    }
    /**actual styling to be modified by firebug theme**/
    .firebugCanvas {
        display: none !important;
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .firebugLayoutBox {
        width: auto !important;
        position: static !important;
    }

    .firebugLayoutBoxOffset {
        opacity: 0.8 !important;
        position: fixed !important;
    }

    .firebugLayoutLine {
        opacity: 0.4 !important;
        background-color: #000000 !important;
    }

    .firebugLayoutLineLeft, .firebugLayoutLineRight {
        width: 1px !important;
        height: 100% !important;
    }

    .firebugLayoutLineTop, .firebugLayoutLineBottom {
        width: 100% !important;
        height: 1px !important;
    }

    .firebugLayoutLineTop {
        margin-top: -1px !important;
        border-top: 1px solid #999999 !important;
    }

    .firebugLayoutLineRight {
        border-right: 1px solid #999999 !important;
    }

    .firebugLayoutLineBottom {
        border-bottom: 1px solid #999999 !important;
    }

    .firebugLayoutLineLeft {
        margin-left: -1px !important;
        border-left: 1px solid #999999 !important;
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .firebugLayoutBoxParent {
        border-top: 0 none !important;
        border-right: 1px dashed #E00 !important;
        border-bottom: 1px dashed #E00 !important;
        border-left: 0 none !important;
        position: fixed !important;
        width: auto !important;
    }

    .firebugRuler{
        position: absolute !important;
    }

    .firebugRulerH {
        top: -15px !important;
        left: 0 !important;
        width: 100% !important;
        height: 14px !important;
        background: url("data:./../img/test3/png1.png") repeat-x !important;
        border-top: 1px solid #BBBBBB !important;
        border-right: 1px dashed #BBBBBB !important;
        border-bottom: 1px solid #000000 !important;
    }

    .firebugRulerV {
        top: 0 !important;
        left: -15px !important;
        width: 14px !important;
        height: 100% !important;
        background: url("data:./../img/test3/png1.png") repeat-y !important;
        border-left: 1px solid #BBBBBB !important;
        border-right: 1px solid #000000 !important;
        border-bottom: 1px dashed #BBBBBB !important;
    }

    .overflowRulerX > .firebugRulerV {
        left: 0 !important;
    }

    .overflowRulerY > .firebugRulerH {
        top: 0 !important;
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .fbProxyElement {
        position: fixed !important;
        pointer-events: auto !important;
    }
    </style><style class="firebugResetStyles" type="text/css" charset="utf-8">/* See license.txt for terms of usage */
/** reset styling **/
.firebugResetStyles {
    z-index: 2147483646 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    border: 0 none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    position: fixed !important;
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent none !important;
    pointer-events: none !important;
    white-space: normal !important;
}
style.firebugResetStyles {
    display: none !important;
}

.firebugBlockBackgroundColor {
    background-color: transparent !important;
}

.firebugResetStyles:before, .firebugResetStyles:after {
    content: "" !important;
}
/**actual styling to be modified by firebug theme**/
.firebugCanvas {
    display: none !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
    width: auto !important;
    position: static !important;
}

.firebugLayoutBoxOffset {
    opacity: 0.8 !important;
    position: fixed !important;
}

.firebugLayoutLine {
    opacity: 0.4 !important;
    background-color: #000000 !important;
}

.firebugLayoutLineLeft, .firebugLayoutLineRight {
    width: 1px !important;
    height: 100% !important;
}

.firebugLayoutLineTop, .firebugLayoutLineBottom {
    width: 100% !important;
    height: 1px !important;
}

.firebugLayoutLineTop {
    margin-top: -1px !important;
    border-top: 1px solid #999999 !important;
}

.firebugLayoutLineRight {
    border-right: 1px solid #999999 !important;
}

.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999 !important;
}

.firebugLayoutLineLeft {
    margin-left: -1px !important;
    border-left: 1px solid #999999 !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBoxParent {
    border-top: 0 none !important;
    border-right: 1px dashed #E00 !important;
    border-bottom: 1px dashed #E00 !important;
    border-left: 0 none !important;
    position: fixed !important;
    width: auto !important;
}

.firebugRuler{
    position: absolute !important;
}

.firebugRulerH {
    top: -15px !important;
    left: 0 !important;
    width: 100% !important;
    height: 14px !important;
    background: url("data:../../img/test3/png1.png") repeat-x !important;
    border-top: 1px solid #BBBBBB !important;
    border-right: 1px dashed #BBBBBB !important;
    border-bottom: 1px solid #000000 !important;
}

.firebugRulerV {
    top: 0 !important;
    left: -15px !important;
    width: 14px !important;
    height: 100% !important;
    background: url("data:../../img/test3/png1.png") repeat-y !important;
    border-left: 1px solid #BBBBBB !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px dashed #BBBBBB !important;
}

.overflowRulerX > .firebugRulerV {
    left: 0 !important;
}

.overflowRulerY > .firebugRulerH {
    top: 0 !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.fbProxyElement {
    position: fixed !important;
    pointer-events: auto !important;
}
</style></head>
<body>
<div class="index_hd">
    <div class="fr hd_r major-list-outer">
        <ul class="major-list">
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1413775760-7544.jpg" height="267" width="294">
					</span>
                    <span class="back-face to-right"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1400684346-4329.jpg" height="267" width="294">
					</span>
                    <span class="back-face to-bottom"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1413775714-2418.jpg" height="267" width="294">
					</span>
                    <span class="back-face to-right"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1411890878-8918.jpg" height="267" width="294">
					</span>
                    <span class="back-face to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1413775714-2418.jpg" height="267" width="294">
					</span>
                    <span class="back-face from-top to-top"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1400684434-4609.jpg" height="267" width="294">
					</span>
                    <span class="back-face to-right"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1428032296-8158.jpg" height="267" width="294">
					</span>
                    <span class="back-face to-right"></span>
                </a>
            </li>
            <li class="major-item">
                <a href="http://sc.chinaz.com/">
					<span class="txt-hide front-face">
						<img src="../../img/test3/1405250374-3685.jpg" height="267" width="294">
					</span>
                    <span class="back-face from-right"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript" src="../../js/test3/public.js"></script>
<script type="text/javascript" src="../../js/test3/main.js"></script>



<div style="display:none">
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6f798e51a1cd93937ee8293eece39b1a' type='text/javascript'%3E%3C/script%3E"));
    </script><script src=" http://hm.baidu.com/h.js?6f798e51a1cd93937ee8293eece39b1a" type="text/javascript"></script><a href="http://tongji.baidu.com/hm-web/welcome/ico?s=6f798e51a1cd93937ee8293eece39b1a" target="_blank"><img src="http://eiv.baidu.com/hmt/icon/21.gif" border="0" height="20" width="20"></a>
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5718743'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s9.cnzz.com/stat.php%3Fid%3D5718743%26show%3Dpic2' type='text/javascript'%3E%3C/script%3E"));</script><span id="cnzz_stat_icon_5718743"><a href="http://www.cnzz.com/stat/website.php?web_id=5718743" target="_blank" title="站长统计"><img src="http://icon.cnzz.com/img/pic2.gif" border="0" hspace="0" vspace="0"></a></span><script src=" http://s9.cnzz.com/stat.php?id=5718743&amp;show=pic2" type="text/javascript"></script><script src="http://c.cnzz.com/core.php?web_id=5718743&amp;show=pic2&amp;t=z" charset="utf-8" type="text/javascript"></script>
</div></body></html>